<template>
  <div class="details-box">
    <div class="all">
      <div class="img">
      <div class="back" @click="router.back()">
        <van-icon name="arrow-left" />
      </div>
      <img :src="listArr.img"/>
      <div class="content">
        <div class="digit">
          <span class="l">
            ￥{{listArr.price}}
            <span>10亿补贴</span>
          </span>
          <span class="m">
            市场清仓价:
            <span> ￥4700 </span>
          </span>
          <span class="r">
            销量:
            <span> 142 </span>
          </span>
        </div>
        <h4>海澜之家</h4>
        <div class="title">
          {{listArr.title}}
        </div>
      </div>      
    </div>
    <div class="Popup b" @click="showPopup">
      <span>选择</span>
      <span class="r">尺码、颜色分类<van-icon name="arrow" style="color:black" /></span>
    </div>
    <div class="Popup">
      <span>服务</span>
      <span class="r">3天无理由退换货·包邮·付款后3-5天内发货</span>
    </div>
      <van-popup
      v-model:show="show"
      round
      position="bottom"
      :style="{ height: '50%'}"
    >
    <h2>功能开发中</h2>
    </van-popup>
    <div class="vip">
      <span>开通黑卡，下单预计省￥30</span>
      <span class="r">立即开卡&nbsp;<van-icon name="arrow" /></span>
    </div>
    <div class="by-stages">
      <span>全站免息 随心分期</span>
      <span class="r">分期免息</span>
      <div>
        <h3>￥25<span>×3期免息，预计可免1.72元</span></h3>
        <van-button type="warning">免息购买<van-icon name="arrow" /></van-button>
      </div>
    </div>
    </div>
    <van-action-bar>
      <van-action-bar-icon icon="service-o" text="客服" />
      <van-action-bar-icon icon="like-o" text="收藏"/>
      <van-action-bar-icon icon="bag-o" text="购物袋" @click="router.push('/bags')" />
      <van-action-bar-button color="#333333" type="warning" text="加入购物袋" @click="addCat(listArr)" />
      <van-action-bar-button color="#f6d9b6" type="danger" text="立即购买"/>
    </van-action-bar>
  </div>
</template>

<script setup lang="ts">
import { onBeforeMount, Ref, ref } from "vue";
import { Router, useRoute, useRouter } from "vue-router";
import { getProById } from "../../apis/homeApi";
import { cartAddApi } from "../../apis/cartApi";
import { useCommonStore } from "../../store";
import { showToast } from 'vant'


const router:Router = useRouter()
const route = useRoute()
/** 弹出层 */
const show = ref(false);
const showPopup = () => {
  show.value = true;
};


/** 获取详情页数据 */
let listArr:Ref<any> = ref([])
const listId = sessionStorage.getItem('goodsId')
details()
async function details(){
  let res = await getProById(listId)
  // console.log(res)
  listArr.value = res.data 
}

/** 获取用户id */
const uid:string = useCommonStore().userInfo.id

/** 加入购物车 */
async function addCat(listArr:any) {
  const arr = {
    pid:listArr.id,
    uid,
    img:listArr.img,
    title:listArr.title,
    price:listArr.price,
    type:listArr.type,
    pcount:1
    }
    // console.log(arr)
  let res = await cartAddApi(arr)
  showToast('加入购物车成功')
}

</script>

<style lang="less" scoped>
@import "../../style/common.less";
.details-box {
  .rel();
  background-color: #f0eff4;
  .all{
    height: calc(100% - 50px);
    overflow-x: hidden;
  }
  .back {
    width: 30px;
    height: 30px;
    background-color: @c3;
    border-radius: 50px;
    position: fixed;
    top: 10px;
    left: 10px;
    .van-icon {
      color: #fff;
      line-height: 30px;
      margin-left: 2px;
    }
  }
  img {
    width: 100%;
    height: 360px;
  }
  .content {
    width: 100vw;
    height: 160px;
    background-color: #fff;
    padding: 0 10px;
    margin-bottom: 10px;
    .digit {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .l {
        font-weight: bold;
        font-size: 26px;
        span {
          width: 56px;
          font-size: 12px;
          color: red;
          border: 2px solid red;
          border-radius: 50px;
        }
      }
      .m {
        font-size: 14px;
        color: darkgray;
        margin-top: 9px;
        margin-right: 20px;
        span {
          text-decoration: line-through;
        }
      }
      .r {
        font-size: 14px;
        color: darkgray;
        margin-top: 9px;
      }
    }
    h4{
      line-height: 50px;
    }
    .title{
      font-size: 18px;
      text-indent: 2rem;
    }
  }
  .Popup{
    width: 100vw;
    height: 50px;
    background-color: #fff;
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    span{
      font-weight: bold;
    }
    .r{
      font-weight: normal;
      color: darkgray;
    }
  }
  .b{
    border-bottom: 1px solid @c4;
  }
  .vip{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    background-color: #4B3F40;
    color: #C5B9AB;
    height: 50px;
    border-radius: 6px;
    padding: 0 10px;
    font-size: 14px;
  }
  .by-stages{
    margin-top: 20px;
    height: 120px;
    background-color: #fff;
    padding: 20px 10px;
    span{
      color: #DE8848;
      font-weight: bold;
      font-size: 22px;
    }
    .r{
        color: darkgray;
        font-weight: normal;
        font-size: 16px;
        margin-left: 12px;
      }
    div{
      display: flex;
      justify-content: space-between;
      h3{
        margin-top: 10px;
        span{
          font-size: 14px;
          color: #4B3F40;
        }
        .van-button{
            border-radius: 20px;
        }
      }
    }
  }
  .van-action-bar{
    width: 100vw;
    height: 50px;
    .van-action-bar-icon{
      font-weight: bold;
    }
    .van-action-bar-button{
      height: 50px;
      border-radius: 0%;
    }
  }
}
</style>
